<ion-content>
	<ion-grid>
		<ion-row class="header-row">
			<close-popup
				color="dark"
				(close)="dismiss()"
				class="absolute right-0 opacity-75 text-sm"
			></close-popup>
			<ion-col class="header-toolbar text-center ion-padding">
				<div class="header-background"></div>
				<p class="my-1 text-xl font-bold">
					{{ transaction?.getAmount(true) | unitsSatoshi }} {{
					currentNetwork?.symbol }}
				</p>
				<p appMarketNetOnly>
					{{ marketCurrency?.symbol }}{{
					transaction?.getAmountEquivalent(marketCurrency, ticker) |
					marketNumber }}
				</p>
			</ion-col>
		</ion-row>
		<ion-row>
			<ion-col>
				<ion-list inset class="list-selectable">
					<ion-item>
						<ion-label>
							<div class="item-title">
								{{ 'TRANSACTIONS_PAGE.FROM' | translate }}
							</div>
							<div class="item-content">
								<div
									*ngIf="address | hasAccountLabel"
									class="font-semibold"
								>
									{{ address | accountLabel }}
								</div>
								{{address}}
							</div>
						</ion-label>
					</ion-item>

					<ion-item
						*ngIf="transaction?.type == 0"
						class="whitespace-normal"
					>
						<ion-label>
							<div class="item-title">
								{{ 'TRANSACTIONS_PAGE.RECIPIENT' | translate }}
							</div>
							<div class="item-content">
								<div
									*ngIf="transaction?.recipientId | hasAccountLabel"
									class="font-semibold"
								>
									{{ transaction?.recipientId | accountLabel
									}}
								</div>
								<div class="text-sm">
									{{transaction?.recipientId}}
								</div>
								<div
									*ngIf="addressCheckResult && addressCheckResult.message"
									class="flex items-center pt-1"
								>
									<ion-icon
										[name]="addressCheckResult.icon"
										color="light"
									></ion-icon>
									<span class="ml-2">
										{{ addressCheckResult.message.key |
										translate:addressCheckResult.message.parameters
										}}
									</span>
								</div>
							</div>
						</ion-label>
					</ion-item>

					<ion-item class="whitespace-normal">
						<ion-label>
							<div class="item-title">
								{{ 'TYPE' | translate }}
							</div>
							<div class="item-content">
								{{ transaction?.getTypeLabel() | translate }}
							</div>
						</ion-label>
					</ion-item>

					<ion-item
						class="whitespace-normal"
						*ngIf="transaction?.type == 3 && extra.username"
					>
						<ion-label>
							<div class="item-title">
								{{ 'DELEGATES_PAGE.DELEGATE' | translate }}
							</div>
							<div class="item-content">{{ extra.username }}</div>
						</ion-label>
					</ion-item>

					<ion-item class="whitespace-normal">
						<ion-label>
							<div class="item-title">
								{{ 'TRANSACTIONS_PAGE.AMOUNT' | translate }}
							</div>
							<div class="item-content">
								{{ (transaction?.amount | unitsSatoshi) || 0 }}
								{{ currentNetwork?.symbol }}
							</div>
						</ion-label>
					</ion-item>

					<ion-item class="whitespace-normal">
						<ion-label>
							<div class="item-title">
								{{ 'TRANSACTIONS_PAGE.FEE' | translate }}
							</div>
							<div class="item-content">
								{{ transaction?.fee | unitsSatoshi }} {{
								currentNetwork?.symbol }}
							</div>
						</ion-label>
					</ion-item>

					<ion-item class="whitespace-normal">
						<ion-label>
							<div class="item-title">
								{{ 'TRANSACTIONS_PAGE.SMART_BRIDGE' | translate
								}}
							</div>
							<div class="item-content">
								{{ transaction?.vendorField || 'N/A' }}
							</div>
						</ion-label>
					</ion-item>
				</ion-list>
			</ion-col>
		</ion-row>
	</ion-grid>
</ion-content>

<ion-footer class="ion-padding text-center ion-no-border ion-no-shadow">
	<ion-button
		(click)="broadcast()"
		[disabled]="hasBroadcast || addressCheckResult?.type === checkTypes.Error"
	>
		{{ 'TRANSACTIONS_PAGE.SEND' | translate }}
	</ion-button>
</ion-footer>
